<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :selectPer="'111'"
        :excelPer="'newCarOrder:export'"
        @search="search"
        @handleDataExport="handleDataExport"
        :showSearchButton="true"
        :showExportButton="true"
        @export="excelInfo"
      >
        <el-input
          v-model="form.client"
          clearable
          placeholder="客户名称/手机号"
          style="width: 150px;margin-bottom: 20px;margin-top: 10px;"
        />
        <CarModel
          style='width: 400px'
          v-model='modelList'
          ref='carModel'
          placeholder='车型组件'
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="车架号"
          style="width: 150px"
        />
        <el-input
          v-model="form.client"
          clearable
          placeholder="订单编号"
          style="width: 150px"
        />
        <job-shop style="width: 150px;" v-model="form.storeId" placeholder="销售门店" />
        <el-select
          clearable
          style="width: 150px"
          v-model="form.saleId"
          placeholder="销售顾问"
        >
          <el-option
            v-for="item in dataArry"
            :key="item.index"
            :value="item.id"
            :label="item.userName"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="销售渠道"
        >
          <el-option
            v-for="item in getDict['品牌']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="销售类型"
        >
          <el-option
            v-for="item in getDict['品牌']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-select
          clearable
          style="width: 150px"
          v-model="form.carBrandId"
          placeholder="订单状态"
        >
          <el-option
            v-for="item in getDict(['订单状态'])['订单状态']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-date-picker
          v-model="form.paymentTime"
          type="datetimerange"
          start-placeholder="创建开始时间"
          end-placeholder="创建结束时间"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-date-picker
          v-model="form.paymentTime"
          type="datetimerange"
          start-placeholder="订单开始时间"
          end-placeholder="订单结束时间"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        />

      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit cursor"
            title="修改"
            @click="updateUser(row)"
          ></i>
          <i title="开票" v-permission="'sh:order:jp:delete'" class="el-icon-s-order cursor" @click="invoice(row)"></i>
          <i title="配车" v-permission="'newCarOrder:supply'" v-if="!row.vin" @click="setVisible1(true)" class="el-icon-key cursor"></i>
          <i title="完结" v-permission="'newCarOrder:finish'" class="el-icon-success cursor" @click="finish(row)"></i>
          <i title="作废" v-permission="'newCarOrder:cancellation'" v-if="row.status == 2" @click="invalid(row)" class="el-icon-delete-solid cursor"></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import {
  receiptDueList,
} from '@/api/financial/index'
import { getDict, exportExcel } from '@/utils/index'
import { CarModel } from '@/components/index'
import { getStoreUser } from '@/api/after-sale/personnel/index'
export default {
  components: {
    CarModel,
  },
  mixins: [
    baseMixin({
      idName: 'id',
      findData: receiptDueList,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      getInvoiceId: null,
      modelList: [],
      dataArry: [],
      getDict: getDict,
      form: {
        storeId: '',
        client: '' // 客户信息
      },
      tableColumnAttributes: [
        { name: '产生门店', value: 'carOrderNo', type: 'text' },
        { name: '付款申请单号', value: 'storeName', type: 'text' },
        { name: '业务单号', value: 'carBrandName', type: 'text' },
        { name: '付款单号', value: 'carModelName', type: 'text' },
        { name: '付款对象', value: 'vin', type: 'text' },
        { name: '申请人', value: 'clientName', type: 'text' },
        { name: '已付金额', value: 'clientPhone', type: 'text' },
        { name: '付款项目', value: 'businessNo', type: 'text' },
        { name: '申请付款方式', value: 'insuranceNo', type: 'text' },
        { name: '申请付款金额', value: 'insureTime', type: 'text' },
        { name: '申请付款时间', value: 'headOffice', type: 'text' },
        { name: '备注', value: 'branchOffice', type: 'text' },
      ],
      dict: {}
    }
  },
  methods: {
    invoice(row){
      this.getInvoiceId = row.id;
    },
    // 编辑员工信息
    updateUser(row) {
      const { id } = row
      this.$router.push({
        path: '/personnel/updataEmployee',
        query: {
          userId: id
        }
      })
    },
    //查看详情
    viewDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/carDeatail',
        query: {
          id: id
        }
      })
    },
    //查看销售单详情
    viewSalesDetail(row) {
      const { id } = row
      this.$router.push({
        path: '/orderManagement/salesList',
        query: {
          id: id
        }
      })
    },
    // 查询
    search(form) {
      this.searchOptions = form
      this.currentPage = 1
      this.setTableData()
    },
    add() {
      this.$router.push({
        name: 'adddepositOrder',
        params: { type: 'add' }
      })
    },
    handleDataExport() {

    },
    //导出
    excelInfo () {
      exportExcel("NewCarOrder", "新车订单(整合)", {}, this.pageSize, this.currentPage);
    },
  },
  async mounted() {
    await getStoreUser().then((res) => {
      const { success, data } = res
      if (success) this.dataArry = data
    })
  }
}
</script>
<style scoped>
  .cursor {
    margin-left: 15px;
    cursor: pointer
  }
</style>
